<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统日志 - 电影院管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            line-height: 1.6;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.3s;
        }
        
        .nav-links a:hover {
            opacity: 0.8;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .logs-section {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .section-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }
        
        .filter-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .filter-group label {
            font-weight: 500;
            color: #555;
        }
        
        .filter-input,
        .filter-select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .logs-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .logs-table th,
        .logs-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e1e1e1;
        }
        
        .logs-table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
            position: sticky;
            top: 0;
        }
        
        .logs-table tr:hover {
            background-color: #f8f9fa;
        }
        
        .log-level {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .level-info {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .level-warning {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .level-error {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .level-debug {
            background-color: #e2e3e5;
            color: #383d41;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            transition: transform 0.2s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-danger {
            background: #dc3545;
        }
        
        .no-data {
            text-align: center;
            color: #666;
            font-style: italic;
            padding: 40px;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .pagination a,
        .pagination span {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-decoration: none;
            color: #333;
        }
        
        .pagination a:hover {
            background-color: #f8f9fa;
        }
        
        .pagination .current {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .log-details {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .log-details:hover {
            white-space: normal;
            word-wrap: break-word;
        }
        
        .alert {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            text-align: center;
        }
        
        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">🎬 管理员控制台</div>
            <div class="nav-links">
                <a href="/admin/dashboard">控制台</a>
                <a href="/admin/users">用户管理</a>
                <a href="/admin/rooms">放映厅管理</a>
                <a href="/admin/logs">系统日志</a>
            </div>
            <div class="user-info">
                <span th:text="'管理员：' + ${currentUser != null ? currentUser.username : '未登录'}">管理员</span>
                <a href="/auth/logout" class="btn btn-sm">退出登录</a>
            </div>
        </nav>
    </header>
    
    <div class="container">
        <div class="logs-section">
            <h2 class="section-title">系统日志</h2>
            
            <!-- 统计卡片 -->
            <div class="stats-cards">
                <div class="stat-card">
                    <div class="stat-number" th:text="${totalLogs ?: 0}">0</div>
                    <div class="stat-label">总日志数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" th:text="${errorLogs ?: 0}">0</div>
                    <div class="stat-label">错误日志</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" th:text="${warningLogs ?: 0}">0</div>
                    <div class="stat-label">警告日志</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" th:text="${todayLogs ?: 0}">0</div>
                    <div class="stat-label">今日日志</div>
                </div>
            </div>
            
            <!-- 消息提示 -->
            <div th:if="${success}" class="alert alert-success" th:text="${success}"></div>
            <div th:if="${error}" class="alert alert-error" th:text="${error}"></div>
            
            <!-- 过滤栏 -->
            <div class="filter-bar">
                <div class="filter-group">
                    <label>搜索：</label>
                    <input type="text" class="filter-input" placeholder="搜索日志内容..." 
                           id="searchInput" onkeyup="filterLogs()">
                </div>
                
                <div class="filter-group">
                    <label>级别：</label>
                    <select class="filter-select" id="levelFilter" onchange="filterLogs()">
                        <option value="">全部</option>
                        <option value="INFO">信息</option>
                        <option value="WARNING">警告</option>
                        <option value="ERROR">错误</option>
                        <option value="DEBUG">调试</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label>日期：</label>
                    <form method="get" action="/admin/logs" style="display: inline;">
                        <input type="date" class="filter-input" id="dateFilter" name="date" 
                               th:value="${selectedDate}" onchange="this.form.submit()">
                        <input type="hidden" name="page" value="0">
                    </form>
                </div>
                
                <a href="/admin/logs" class="btn btn-secondary">清除过滤</a>
                <button class="btn btn-danger" onclick="clearLogs()" 
                        th:if="${currentUser != null and currentUser.isAdmin}">清空日志</button>
            </div>
            
            <!-- 日志表格 -->
            <div th:if="${logs != null and !logs.empty}">
                <table class="logs-table" id="logsTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>时间</th>
                            <th>级别</th>
                            <th>操作</th>
                            <th>详情</th>
                            <th>用户</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="log : ${logs}">
                            <td th:text="${log.id}">ID</td>
                            <td th:text="${#temporals.format(log.logTime, 'MM-dd HH:mm:ss')}">时间</td>
                            <td>
                                <span class="log-level" 
                                      th:classappend="'level-info'"
                                      th:text="'INFO'">级别</span>
                            </td>
                            <td th:text="${log.operation ?: '系统操作'}">操作</td>
                            <td class="log-details" th:text="${log.logContent}" 
                                th:title="${log.logContent}">详情</td>
                            <td th:text="${log.username ?: '系统'}">用户</td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页 -->
                <div class="pagination" th:if="${totalPages > 1}">
                    <a th:if="${currentPage > 0}" 
                       th:href="@{/admin/logs(page=${currentPage - 1}, size=${pageSize}, date=${selectedDate})}">上一页</a>
                    
                    <span th:each="i : ${#numbers.sequence(0, totalPages - 1)}">
                        <a th:if="${i != currentPage}" 
                           th:href="@{/admin/logs(page=${i}, size=${pageSize}, date=${selectedDate})}" 
                           th:text="${i + 1}">页码</a>
                        <span th:if="${i == currentPage}" 
                              class="current" th:text="${i + 1}">当前页</span>
                    </span>
                    
                    <a th:if="${currentPage < totalPages - 1}" 
                       th:href="@{/admin/logs(page=${currentPage + 1}, size=${pageSize}, date=${selectedDate})}">下一页</a>
                </div>
            </div>
            
            <div th:if="${logs == null or logs.empty}" class="no-data">
                <p>暂无日志数据</p>
            </div>
        </div>
    </div>
    
    <script>
        function filterLogs() {
            const searchInput = document.getElementById('searchInput').value.toLowerCase();
            const levelFilter = document.getElementById('levelFilter').value;
            const table = document.getElementById('logsTable');
            const rows = table.getElementsByTagName('tr');
            
            for (let i = 1; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                const level = cells[2].textContent.trim();
                const action = cells[3].textContent.toLowerCase();
                const details = cells[4].textContent.toLowerCase();
                
                let showRow = true;
                
                // 搜索过滤
                if (searchInput && !action.includes(searchInput) && !details.includes(searchInput)) {
                    showRow = false;
                }
                
                // 级别过滤
                if (levelFilter && level !== levelFilter) {
                    showRow = false;
                }
                
                rows[i].style.display = showRow ? '' : 'none';
            }
        }
        
        function clearFilters() {
            document.getElementById('searchInput').value = '';
            document.getElementById('levelFilter').value = '';
            filterLogs();
        }
        
        function clearLogs() {
            if (confirm('确定要清空所有日志吗？此操作不可恢复！')) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/admin/logs/clear';
                document.body.appendChild(form);
                form.submit();
            }
        }
        
        // 自动刷新日志（每30秒）
        setInterval(function() {
            if (document.getElementById('searchInput').value === '' && 
                document.getElementById('levelFilter').value === '') {
                location.reload();
            }
        }, 30000);
    </script>
</body>
</html>